<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/layuiAdmin/css/admin.css" media="all">
    <style>
        .layui-icon{font-size: 30px;border:2px solid #CCCCCC;margin: 3px}
    </style>
</head>
<body>
<div style="padding:10px 30px;">
    <fieldset style="border: 1px solid lightgray;padding: 20px">
        <legend style="font-size: 18px;padding-left: 10px;">筛选条件</legend>
        <form class="layui-form layui-form-pane" action="" style="width: 660px; display: grid;grid-template-columns: 1fr 1fr;">
            <div class="layui-form-item" pane>
                <label class="layui-form-label">登录起始...</label>
                <div class="layui-input-block"style="width: 50%;">
                    <input type="text" name="title" required  lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane>
            <label class="layui-form-label">登录结束...</label>
            <div class="layui-input-block"style="width: 50%">
                <input type="text" name="title" required  lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
            </div>
        </div>
            <div class="layui-form-item" pane>
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block"style="width: 50%">
                <input type="text" name="title" required  lay-verify="required" placeholder="模糊查询账号名称" autocomplete="off" class="layui-input" id="searchInput">
            </div>
        </div>
            <div>
                <button type="reset" class="layui-btn layui-btn-radius"style="width: 80px">重置</button>
                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal"lay-submit lay-filter="LAY-sysuser-front-search" style="width: 80px">搜索</button>
                <div id="searchResult"></div>
            </div>
        </form>
    </fieldset>
</div>
<div class="layui-card-body">
    <div style="padding: 10px;">
        <button class="layui-btn layuiadmin-btn-useradmin"  data-type="add">新增账号</button>
        <button class="layui-btn layuiadmin-btn-useradmin" >下载模板</button>
        <button class="layui-btn layuiadmin-btn-useradmin" >批量上传</button>
        <button class="layui-btn layuiadmin-btn-useradmin" >批量下载</button>
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">批量删除</button>
        <div id="page" style="float: right;padding-bottom: 20px;padding-right: 30px">
            <i class="layui-icon layui-icon-cols" ></i>
            <i class="layui-icon layui-icon-template-1" ></i>
            <i class="layui-icon layui-icon-print" ></i>
            <i class="layui-icon layui-icon-about"></i>
        </div>
    </div>
</div>

    <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
    <script type="text/html" id="table-useradmin-webuser">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="revise"style="width: 78px;padding-right: 10px"><i class="layui-icon layui-icon-revise"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width: 78px;padding-right: 10px"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <!-- 最后登录时间格式化处理 -->
    <script type="text/html" id="lastLoginTimeTpl">
        {{formatDate(d.lastLoginTime)}}
    </script>
<script src="../../layui/layui.js"></script>
<script type="text/javascript">
    // 日期格式转换函数
    function formatDate(str) {
        if(str != null){
            var now = new Date(str);
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            return year + "-" + month + "-" + date +" "+hours+":"+minutes+":"+seconds;
        }
<<<<<<< HEAD
    </script>
</div>

=======
        return "";
    }
</script>
>>>>>>> c3b76541669a59146cb6b8da67817b3aecfe7b25
<script type="text/javascript">
    layui.config({
        base: '' //静态资源(js,css)所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer','table','form'], function(){//layui加载的三个模块，layer弹出层，table表格组件和form表单组件，执行回调函数
        var $ = layui.$         //定义变量$引用layui根对象，后续通过$访问layui的属性和方法
            ,form = layui.form  //获取表单
            ,layer = layui.layer   //获取弹出层
            ,table = layui.table;   //获取表格内容

        //加载table
        table.render({//调用render方法渲染表格
            elem: '#LAY-user-manage'//将渲染到ID为''的元素
            ,url:'/user/findUserAll' //后端接口，获取表格数据
            ,cellMinWidth: 100 //全局定义常规单元格的最小宽度
            ,title: '用户数据表'//表格标题
            ,cols: [[//表格列和每一列的属性
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id',title:'ID',width: 80}
                ,{field:'name', title:'用户名称',width: 100}
                ,{field:'password', title:'密码',width: 160}
                    ,{field:'lastLoginTime', title:'最后登录时间',templet:'#lastLoginTimeTpl',width: 220}//表格中某列模板的定义，此处定义时间格式
                ,{field:'loginCount', title:'登录次数',width: 100}
                ,{field:'phone', title:'联系方式',width: 160}
                ,{field:'age', title:'年龄',width: 80}
                ,{fixed: 'right', title:'操作', toolbar: '#table-useradmin-webuser',width:220}//表格中工具栏的定义，此处定义修改和删除操作按钮
            ]]
            ,page: {
                curr: 1 //设定初始在第 5 页
                ,limit: 5 //设定初始每页显示 5 条
            },
            limits:[5,10,15,20]
        });

        //监听行工具事件（修改，删除）
        table.on('tool(LAY-user-manage)', function(obj){        //监听表格ID为''的工具事件，点击工具栏按钮触发
            var data = obj.data;                    //获取当前行数据
            //console.log(obj)
            if(obj.event === 'del'){                //判断触发事件是否为删除
                layer.confirm('是否确定删除行？', function(index){//弹出确认框是否删除该行，确认删除时执行回调函数
                    $.ajax({                //当确认删除时，发送一个ajax请求到后端接口
                        url:"/emp/del", //请求后端处理删除操作的接口地址
                        type:"post", //请求方式get | post
                        data:{userId:data.userId}, //提交json字符串对象参数,用户id
                        dataType:"json", //后端返回参数类型
                        success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                            if(res.code == 0){//成功
                                layer.msg(res.msg);//弹出提示
                                table.reload('LAY-user-manage'); //数据刷新
                                layer.close(index); //关闭弹层
                            }
                            if(res.code == -1){//系统出问题
                                layer.msg(res.msg,{icon: 5});//弹出提示
                            }
                        }
                    })
                });
            } else if(obj.event === 'revise'){
                layer.open({    //打开新的层，修改页面
                    type: 2
                    ,title: '修改用户信息'
                    ,skin: 'layui-layer-molv'
                    ,content: 'revise.html'
                    ,maxmin: true
                    ,area: ['450px', '370px']
                    ,success: function (layero,index){
                        var body = layer.getChildFrame("body",index);
                        var contentWindow = layero.find('iframe')[0].contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        body.find("input[name=userId]").val(data.userId);
                        body.find("input[name=userName]").val(data.username);
                        body.find("input[name=passWord]").val(data.password);
                        body.find("input[name=phone]").val(data.phone);
                        body.find("input[name=age]").val(data.age);

                        /*  var now = new Date(data.hiredate);
                          var year = now.getFullYear();  //取得4位数的年份
                          var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                          var date = now.getDate();      //返回日期月份中的天数（1到31）
                          var hiredate = year + "-" + month + "-" + date;*/

                    }
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-user-front-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit('+ submitID +')', function(data){ //监听表单提交事件
                            var field = data.field; //获取提交的字段
                            $.ajax({    //jquery
                                url:"/emp/update", //请求后端接口地址
                                type:"post", //请求方式get | post
                                data:JSON.stringify(field), //提交json字符串对象参数
                                contentType:"application/json;charset=utf-8", //发送信息至服务器时内容编码类型
                                dataType:"json", //后端返回参数类型

                                success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                                    if(res.code == 0){//成功
                                        layer.msg(res.msg);//弹出提示
                                        table.reload('LAY-user-manage'); //数据刷新
                                        layer.close(index); //关闭弹层
                                    }
                                    if(res.code == -1){//系统出问题
                                        layer.msg(res.msg,{icon: 5});//弹出提示
                                    }
                                }
                            })
                        });
                        submit.trigger('click');
                    }
                });
            }
        });


        //监听搜索
        form.on('submit(LAY-sysuser-front-search)', function(data){
            var field = data.field;

            //执行重载
            table.reload('LAY-user-manage', {
                url: '/user/findUserByName',
                where: field
            });
        });

        //事件
        var active = {
            batchdel: function(){   //批量删除数据方法
                var checkStatus = table.checkStatus('LAY-user-manage')
                    ,checkData = checkStatus.data; //得到选中的数据

                if(checkData.length == 0){ //选中的数据是否为空
                    return layer.msg('请选择数据');
                }

                // 程序走到这里，表示已经有选中要删除的数据了。
                layer.confirm('确定删除吗？',function (){ //确认删除时执行函数
                    //真实删除，应该和后端结合 ajax
                    table.reload('LAY-user-manage'); //更新表格
                    layer.msg('已删除');
                })
            }
            ,add: function(){       //新增用户方法
                layer.open({        //打开弹出层添加数据
                    type: 2
                    ,title: '添加用户信息'
                    ,skin: 'layui-layer-molv'
                    ,content: 'add.html'
                    ,maxmin: true
                    ,area: ['450px', '370px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){      //回调函数，点击确定按钮调用提交表单数据
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-user-front-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);
                        //监听表单提交
                        iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                            var field = data.field; //获取提交的字段
                            // console.log(field)
                            // console.log(JSON.stringify(field)) // 将普通js对象转换为JSON字符串对象
                            // {key:value,key:'value'} // 普通表单格式 -- js对象
                            // {"key":value,"key":"value"} // json格式 -- json字符串对象
                            // 提交给后端 -- ajax异步提交 -- jQuery -- 在线工具参考：https://tool.oschina.net/
                            $.ajax({
                                url:"/emp/add", //请求后端接口地址
                                type:"post", //请求方式get | post
                                data:JSON.stringify(field), //提交json字符串对象参数
                                contentType:"application/json;charset=utf-8", //发送信息至服务器时内容编码类型
                                dataType:"json", //后端返回参数类型
                                success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                                    if(res.code == 0){//成功
                                        layer.msg(res.msg);//弹出提示
                                        table.reload('LAY-user-manage'); //数据刷新
                                        layer.close(index); //关闭弹层
                                    }
                                    if(res.code == -1){//系统出问题
                                        layer.msg(res.msg,{icon: 5});//弹出提示
                                    }
                                }
                            })
                        });
                        submit.trigger('click');
                    }
                });
            }
        };

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';    //判断是否存在
        });

    });
</script>
</body>
</html>